<template>
  <div>
    <div class="gllb_box">
      <header-comm></header-comm>
      <div class="header_sele" :style="$parent.$parent.collapsed==false?'left: 10%':'left:80px'">
        <div class="add_qy">
          <a-button type="primary" @click="addqyzs">添加企业证书</a-button>
        </div>
        <div>
          <a-input placeholder="请输入关键字" style="width:300px;" @change="gjzSearch" v-model="fields" />
        </div>
      </div>
      <!-- 表格-================= -->
      <div class="bcg">
        <div class="glwz">
          <a-table
            @change="getzhengjianList"
            :loading="loading"
            :columns="columns"
            :pagination="pagination"
            :dataSource="zsdata"
            :scroll="{ x: 1500 }"
          >
            <template slot="LicenseAdd" slot-scope="text, record, index">
              <div class="fzdate">
                <img :src="text" alt />
              </div>
            </template>
            <template slot="operation" slot-scope="text, record, index">
              <div class="editable-row-operations">
                <a-popconfirm
                  title="确定删除吗?"
                  class="del"
                  @confirm="() =>qyzsdelete(record,record.key)"
                >删除</a-popconfirm>
                <a class="del" @click="updateZhengjian(record)">更新</a>
              </div>
            </template>
          </a-table>
        </div>
      </div>
      <div class="qyzs_box" v-if="addqyflag">
        <addqyzstk></addqyzstk>
      </div>
    </div>
  </div>
</template>

<script>
import headerComm from "../header-comm/header.vue";
import addqyzstk from "./addqyzstk.vue";
import qs from "qs";
const columns = [
  {
    title: "企业名称",
    dataIndex: "GSMC"
  },
  {
    title: "证书名称",
    dataIndex: "LicenseName"
  },
  {
    title: "证书存放地址",
    dataIndex: "LicenseAdd",
    scopedSlots: { customRender: "LicenseAdd" }
  },
  {
    title: "发证机构",
    dataIndex: "LicenseOrgan"
  },
  {
    title: "上传日期",
    dataIndex: "LicenseData"
  },
  {
    title: "操作",
    dataIndex: "operation",
    fixed: "right",
    width: 250,
    scopedSlots: { customRender: "operation" }
  }
];
export default {
  data() {
    return {
      columns,
      zsdata: [],
      loading: false,
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        total: 0,
      },
      addqyflag: false,
      fields: ""
    };
  },

  methods: {
    getzhengjianList(pagination) {
        console.log(pagination)
      this.axios
        .post(
          "zhengjian/zhengjianList.php",
          qs.stringify({
            page: pagination.current,
            pageSize: pagination.defaultPageSize,
            fields:  this.fields
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.zsdata = res.data.result.data;
            for (var i = 0; i < this.zsdata.length; i++) {
              this.zsdata[i].key = i;
            }
            this.pagination.total = Number(res.data.result.total);
          }else{
               this.zsdata=[]
          }
        });
    },
    addqyzs() {
      this.addqyflag = true;
    },
    qyzsdelete(value, key) {
      this.axios
        .post(
          "zhengjian/deletezhengjian.php",
          qs.stringify({
            id_num: value.id
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            //删除成功,总条数减1
            this.pagination.total = this.pagination.total - 1;
            const dataSource = [...this.zsdata];
            this.zsdata = dataSource.filter(item => item.key !== key);
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    updateZhengjian(value) {
      this.axios
        .post(
          "zhengjian/updateZhengjian.php",
          qs.stringify({
            id_num: value.id
          })
        )
        .then(res => {
          console.log(res);
           if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
            this.getzhengjianList(this.pagination)
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    gjzSearch() {
      this.getzhengjianList(this.pagination);
    }
  },
  components: {
    headerComm,
    addqyzstk
  },
  created() {
    this.getzhengjianList(this.pagination);
  }
};
</script>

<style lang='less'>
.gllb_box{
  .header_sele{
    position: absolute;
  }
.qyzs_box {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  width: 100%;
  height: 1000px;
}
.fzdate {
  img {
    height: 50px;
  }
}
 .glwz {
  width: 98%;
  position: relative;
  top: 147px;
  left: 1%;
  background-color: #fff;
  border: 1px solid #ccc;
}
}

</style>
